<template>
  <div class="box xt-flex-center-item">
    <div class="box-content xt-pt-2">
      <div class="box-content-title xt-flex-center-item xt-text-danger">
        <a class="box-content-nav" @click="navT(1)" :class="[{'box-content-active':navNumber === 1}]">用户登录</a>
        /
        <a class="box-content-nav" @click="navT(2)" :class="[{'box-content-active':navNumber === 2}]">注册</a>
      </div>
      <div class="box-content-form" v-if="navNumber === 1">
        <input v-model="userForm.usernumber" type="text" class="box-content-form-input xt-p-1 xt-m-1" placeholder="请输入手机号" />
        <input v-model="userForm.userpwd" type="password" class="box-content-form-input xt-p-1 xt-m-1" placeholder="请输入密码" />
        <div class="box-content-form-btn xt-p-1 xt-flex-center-item xt-bg-info xt-mt-5" @click="userLogin()">登录</div>
      </div>

      <div class="box-content-form" v-if="navNumber === 2">
        <input type="text" v-model="userForm.usernumber" class="box-content-form-input xt-p-1 xt-m-1" placeholder="请输入手机号" />
        <input type="password" v-model="userForm.userpwd" class="box-content-form-input xt-p-1 xt-m-1" placeholder="请输入密码" />
        <input type="text" v-model="userForm.username" class="box-content-form-input xt-p-1 xt-m-1" placeholder="请输入姓名" />
        <input type="text" v-model="userForm.userage" class="box-content-form-input xt-p-1 xt-m-1" placeholder="请输入年龄" />
        <input type="text" v-model="userForm.useraddress" class="box-content-form-input xt-p-1 xt-m-1" placeholder="请输入地址" />
        <div class="box-content-form-btn xt-p-1 xt-flex-center-item xt-bg-info xt-mt-5" @click="register()">注册</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import Axios from 'axios'

@Component({
  components: {
  },
})
export default class Home extends Vue{
  navNumber:Number = 2; // 1 登录 2 注册

  userForm:any = {
    username:'',
    userpwd:'',
    userage:'', 
    useraddress:'', 
    usernumber:''
  }


  // 进行登录注册选项
  navT(num:Number){
    this.navNumber = num;
  }

  // 登录
  userLogin(){
    const { userpwd, usernumber } = this.userForm;
    if(userpwd === '' || usernumber ===''){
      return alert('以上文本不能为空');
    }

    const param = {
      userpwd, usernumber
    };

    Axios.post('/web/login', param)
    .then((res:any)=>{
      if(res.status === 200){
        window.localStorage.cyxUser = JSON.stringify(res.data.data);
        alert('用户登录成功');
        (this as any).$router.push({
          path:'/home'
        });
        return 
      }
      return alert(res.data.data);
    })
  }
  
  // 注册
  register(){
    const { username, userpwd, userage, useraddress, usernumber } = this.userForm;
    if(username === '' || userpwd === '' || userage === '' || useraddress === '' || usernumber ===''){
      return alert('以上文本不能为空');
    }
    const param = this.userForm;

    Axios.post('/web/userAdd', param)
    .then((res:any)=>{
      if(res.status === 200){
        alert('用户注册成功');
        this.navNumber = 1;
        return;
      }
      return alert(res.data.data);
    })
  }
}
</script> 

<style scoped lang="less">
  .box{
    width: 100%;
    height: 100%;
    background: url('../assets/img/1-200QG61UX39.jpg');
    position: fixed;
    bottom: 0;
    left: 0;
    background-size: 100% 100%;

    &-content{
      position: relative;
      z-index: 1;
      width: 700px;
      height: 500px;
      background: rgba(255, 255, 255, 0.7);

      &-title{
        font-size: 20px;
      }
      &-nav{
        cursor: pointer;
        border-bottom: 2px solid rgba(255, 255, 255, 1);
      }
      &-active{
        border-bottom: 2px solid #0f6674;
      }

      &-form{
        display: flex;
        align-items: center;
        flex-direction: column;

        &-input{
          display: block;
          width: 500px;
          height: 30px;
          outline: none;
          border:none;
        }
        &-btn{
          width: 500px;
          height: 30px;
          cursor: pointer;
        }
      }
    }
  }
</style>
